<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大桥证测试</title>
    <link rel="stylesheet" href="/static/css/use.css">
    <link rel="shortcut icon" href="/static/img/aaa.png" />
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/index.js"></script>

</head>

<body>
    <div id="app">
        <!-- top -->
        <div id="top">
            <div id="left">
                <div id="left_top">
                    <div id="left_top_img">
                        <img src="">
                    </div>
                    <div id="left_top_name">
                        {{DriverName}}
                    </div>
                </div>
                <div id="left_bottom">
                    {{PhoneNum}}
                </div>
            </div>
            <div id="right">
                <div id="right_top">
                    <button type="button" @click="EXIT">退出</button>
                </div>
                <div id="right_bottom">
                    {{FleetCName}}
                </div>
            </div>
        </div>
        <!-- middle -->
        <div id="M_middle">
            大 桥 <span id="middle_span">优 惠</span> 证
        </div>

        <!-- bottom -->
        <div id="bottom">
            <div id="youxiaoshijian">
                <!-- 有效时间：7/28 14:00前 -->
            </div>
            <div id="chepai">
                {{TruckLic}}
            </div>
            <div id="jiantou">

            </div>
            <div id="shijian">
                <div id="time">
                    <div><span id="bf_timer"></span><span id="timer"></span><span id="af_timer"></span></div>
                    <div>当前时间<span id="timespan"></span><span id="timespan_day"></span></div>
                </div>
            </div>
        </div>
        <div id="hu"></div>
    </div>

    <script>
        //解码操作
        var url = decodeURI(location.search, "utf-8");
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；  
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
            }
        }
        //vue显示
        var app = new Vue({
            el: "#app",
            data: {
                DriverName: decodeURI(theRequest.DriverName, "utf-8"),
                FleetCName: decodeURI(theRequest.FleetCName, "utf-8"),
                PhoneNum: decodeURI(theRequest.PhoneNum, "utf-8"),
                TruckLic: decodeURI(theRequest.TruckLic, "utf-8"),
                isShow_1: true,
                isShow_2: false
            },
            methods: {
                EXIT() {
                    var told = confirm("确定退出嘛？");
                    if (told) {
                        WeixinJSBridge.call('closeWindow');
                    }
                }
            }
        })

        //判断是否在十分钟有效期内
        function gettimec(startDate, endDate) {
            // var getc=[];
            if (startDate.length > 0 && endDate.length > 0) {
                var startDateTemp = startDate.split(" ");
                var endDateTemp = endDate.split(" ");

                var arrStartDate = startDateTemp[0].split("-");
                var arrEndDate = endDateTemp[0].split("-");

                var arrStartTime = startDateTemp[1].split(":");
                var arrEndTime = endDateTemp[1].split(":");

                var allStartDate = new Date(arrStartDate[0], arrStartDate[1], arrStartDate[2], arrStartTime[0], arrStartTime[1], arrStartTime[2]);
                var allEndDate = new Date(arrEndDate[0], arrEndDate[1], arrEndDate[2], arrEndTime[0], arrEndTime[1], arrEndTime[2]);
                var count = (allStartDate.getTime() - allEndDate.getTime()) / 1000;
                return count;
            } else {
                alert("时间不能为空");
            }
        }
        //格式化时间
        Date.prototype.Format = function(fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份 
                    "d+": this.getDate(), //日 
                    "H+": this.getHours(), //小时 
                    "m+": this.getMinutes(), //分 
                    "s+": this.getSeconds(), //秒 
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                    "S": this.getMilliseconds() //毫秒 
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
            //倒计时
        var usetime = decodeURI(theRequest.time, "utf-8");
        var timenow = new Date().Format("yyyy-MM-dd HH:mm:ss");
        var starttime = 10 * 60 - gettimec(timenow, usetime);
        if (starttime < 0) {
            starttime = 0
        }
        var m = starttime / 60;
        var s = starttime % 60;
        var daojishi;
        var username = "username";
        var dt = "";
        window.onload = function() {
            if (dt == "") {
                dt = m + ":" + s;
            }
            daojishi = setInterval("showTime(username, dt)", 1000);
        }

        function showTime(clientName, time) {
            var dtime = time.split(':');
            var m = parseInt(dtime[0], 10);
            var s = parseInt(dtime[1], 10);
            msgbf = "请在";
            msgaf = "秒内通行";
            document.getElementById("bf_timer").innerHTML = msgbf;
            document.getElementById("af_timer").innerHTML = msgaf;
            if (m < 10 && s >= 10) {
                document.getElementById("timer").innerHTML = "0" + m + ":" + s;
            } else if (s < 10 && m >= 10) {
                document.all("timer").innerHTML = m + ":0" + s;
            } else if (m < 10 && s < 10) {
                document.getElementById("timer").innerHTML = "0" + m + ":0" + s;
            } else {
                document.getElementById("timer").innerHTML = m + ":" + s;
            }
            if (s == 0) {
                if (m > 0) {
                    m--;
                    s = 60;
                } else {
                    document.getElementById("jiantou").innerHTML = '<img  src="" >';
                    // document.getElementById("jiantou").innerHTML = '<i class="iconfont icon-youjiantou"></i>';
                    document.getElementById("bf_timer").innerHTML = "";
                    document.getElementById("af_timer").innerHTML = "";
                    document.getElementById("timer").innerHTML = "优惠券已失效";
                    clearInterval(daojishi);
                }
            }
            if (m >= 0 && s > 0) {
                s--;
                document.getElementById("jiantou").innerHTML = '<img  src="" >';
                // document.getElementById("jiantou").innerHTML = '<i class="iconfont .icon-youjiantou-copy"></i>';
            }
            var arr = new Array(3);
            arr[0] = String(m);
            arr[1] = String(s);
            dt = arr.join(":");
            // setCookie(clientName, dt)
        }


        //当前时间
        function time() { //编写获取时间的函数
            var date = new Date(); //创建JS自带的Date日期对象
            var year = date.getFullYear(); //获取年
            var month = date.getMonth() + 1; //获取月，注意其范围是0~30，使用时需要加1
            month = month < 10 ? "0" + month : month; //三则运算符判断是个位数则前面加一个零，好看
            var day = date.getDate(); //获取日
            day = day < 10 ? "0" + day : day;
            var hour = date.getHours(); //获取小时
            hour = hour < 10 ? "0" + hour : hour;
            var minute = date.getMinutes(); //获取分钟
            minute = minute < 10 ? "0" + minute : minute;
            var second = date.getSeconds(); //获取秒
            second = second < 10 ? "0" + second : second;
            var current = " " + hour + " : " + minute + " : " + second + " ";
            var current_day = year + "/" + month + "/" + day;
            document.getElementById("timespan").innerHTML = current; //获取对应ID标签的对象，将变量current显示在对应位置
            document.getElementById("timespan_day").innerHTML = current_day;
        }
        time();
        setInterval("time()", 1000); //setInterval函数可以延迟一定时间后执行某一函数
    </script>
</body>

</html>